<template >
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div class="qrbg" @click.self="stopClick">
    <div class="qr">
      <div class="head">
        <img :src="posterInfo.img" alt="" />
        <p>{{ posterInfo.introduction }}</p>
      </div>

      <!-- 票价信息 -->
      <div class="ticketInfo">
        <div class="ticketInfo-top">
          <!-- 票价信息 -->
          <div class="ticketInfo-info">
            <div class="ticketInfo-user">
              <img :src="ticketInfo.avatar" alt="" />
              <ul>
                <li class="name">{{ ticketInfo.name }}</li>
                <li class="price">
                  ￥{{ ticketInfo.price }}
                  <!-- <span>起</span> -->
                </li>
              </ul>
            </div>
            <img class="theatreImg" :src="ticketInfo.theatreImg" alt="" />
          </div>

          <!-- 二维码 -->
          <div class="ticketInfo-qrcode">
            <div class="code">
              <img :src="ticketInfo.qrCode" alt="" />
            </div>
            <button>▪ 扫二维码购票 ▪</button>
          </div>
        </div>

        <ul class="ticketInfo-bottom">
          <li v-for="(v, i) in ticketInfo.tags" :key="i">{{ v }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
 
<script >
export default {
  name: "qrCodePoster",
  data() {
    return {
      posterInfo: {
        // 海报信息
        img: require("../assets/qr/poster.png"),
        introduction:
          "不看《只有峨眉山》，怎算到过峨眉山?四川必看的沉浸式演出。",
      },
      ticketInfo: {
        // 票价信息
        avatar: require("../assets/头像.png"),
        name: "张三啊",
        price: "238",
        theatreImg: require("../assets/qr/xj.png"), // 戏剧图片
        qrCode: require("../assets/qr/rqcode.png"), //二维码
        tags: ["首座", "行进式体验的", "戏剧幻城"], // 底部标签
      },
    };
  },
  methods: {
    stopClick(){this.$emit("stopClick")}
  },
};
</script>
 
<style lang='scss' scoped>
.qrbg {
  height: 1500px;
}
.qr {
  box-sizing: border-box;
  padding: 34px;
  background-color: cadetblue;
  width: 90%;
  margin: auto;
  .head {
    background-color: #fff;
    padding: 15px;
    padding-bottom: 20px;
    border-radius: 7px;

    img {
      width: 100%;
      height: 540px;
      margin-bottom: 5px;
    }

    p {
      padding-right: 100px;
      font-size: 26px;
      font-weight: 600;
      line-height: 45px;
    }
  }

  .ticketInfo {
    background-color: #fff;
    padding: 0 20px 15px;
    margin-top: 30px;

    .ticketInfo-top {
      margin-bottom: 36px;
      display: flex;
      justify-content: space-between;
      padding-left: 20px;

      .ticketInfo-info {
        .ticketInfo-user {
          display: flex;
          padding-top: 26px;
          margin-bottom: 60px;

          img {
            width: 100px;
            height: 100px;
            margin-right: 26px;
          }

          ul {
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
              font-size: 34px;
              color: black;
              font-weight: bold;
            }

            .price {
              color: red;
              font-size: 39px;
              font-weight: bold;

              span {
                font-size: 24px;
              }
            }
          }
        }

        .theatreImg {
          width: 240px;
          height: 140px;
        }
      }

      .ticketInfo-qrcode {
        width: 260px;
        padding-right: 10px;
        text-align: right;
        padding-top: 18px;
        .code {
          //   border: 1px dotted black;
          img {
            width: 220px;
            width: 95%;
          }
        }

        button {
          width: 95%;
          height: 50px;
          border-radius: 25px;
          border: 0;
          color: #fff;
          margin-top: 12px;
          background: linear-gradient(225deg, #eba206, #eeb24b);
        }
      }
    }

    .ticketInfo-bottom {
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      li {
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 4px;
        padding: 0 13px 0 15px;
        position: relative;

        &::before {
          content: "";
          width: 4px;
          height: 27px;
          background-color: crimson;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &:last-child::after {
          content: "";
          width: 4px;
          height: 27px;
          background-color: crimson;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>